<template>
	<view>
		<view class="top" v-if="type == 0">
			<view class="topmain1">
				提现至:
			</view>
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Group%203911%402x.png" mode="" class="topimg1"></image>
			<view class="topmain3">
				微信
			</view>
			<view class="topmain6"></view>
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/right.png" mode="" class="topimg"></image>
		</view>
		<view class="top" v-if="type == 1">
			<view class="topmain1">
				提现至:
			</view>
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Group%203910%402x.png" mode="" class="topimg1"></image>
			<view class="topmain3">
				支付宝
			</view>
			<view class="topmain6">
				{{data.alipay_name?data.alipay_name:''}}
			</view>
			<view class="topmain6"></view>
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/right.png" mode="" class="topimg"></image>
		</view>
		<view class="top" v-if="type == 2">
			<view class="topmain1">
				提现至:
			</view>
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/jianshe.png" mode="" class="topimg1"></image>
			<view class="topmain3 topmain5">
				{{data.bank_name?data.bank_name:'未配置'}}
			</view>
			<view class="topmain4">
				{{data.bank_code?data.bank_code:'未配置'}}
			</view>
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/right.png" mode="" class="topimg"></image>
		</view>
		<view class="main">
			<view class="maintop">
				提现金额
			</view>
			<view class="mainnum" @click="open">
				<text class="numsp">￥{{ money }}</text>

			</view>
			<view class="mainnum1">
				当前可提现金额：{{list.shop_money?list.shop_money:0}}元
			</view>
			<view class="numtime" v-if="type != 2">
				<view class="timesp">
					预计到账时间
				</view>
				<view class="timesp">
					当日到账
				</view>
			</view>
			<view class="numtime" v-else>
				<view class="timesp">
					银行卡提现规则为T+1到账,节假日顺延。
				</view>
			</view>
			<view class="btn" @click="btn">
				立即提现
			</view>
		</view>
		<u-keyboard mode="number" @change="valChange" @backspace="backspace" v-model="show" tips='请输入金额'></u-keyboard>
		<u-modal 
			v-model="show1" 
			:content="content" 
			show-cancel-button='true' 
			@confirm='confirm' 
			@cancel='cancel' 
			cancel-text='继续提现' 
			confirm-text='返回'
			cancel-color='#36BE6A'
			confirm-color='#606266'
			>
		</u-modal>
		<u-modal
			v-model="show2" 
			:content="content1" 
			show-cancel-button='true' 
			@confirm='confirm' 
			@cancel='cancel' 
			cancel-text='继续提现' 
			confirm-text='返回'
			cancel-color='#36BE6A'
			confirm-color='#606266'
			>
		</u-modal>
		<tixian-success v-model="tixianSuccess"
			:title="title"
			:money="money"
			:method="method"
			:fuwuFee="fuwuFee"
			:expectedTime="expectedTime"
			:status="status"
			:time="time"
		 ></tixian-success>
	</view>
</template>

<script>
	import tixianSuccess from '@/components/tixian-success.vue';
	export default {
		components: {
			tixianSuccess
		},
		data() {
			return {
				type:'',
				cardid:'',
				data:'',
				list:'',
				show:false,
				money: '',
				show1:false,
				show2:false,
				content: '提现成功，待审核！',
				content1:'',
				tixianSuccess:false,
				fuwuFee: 0,
				expectedTime: '',
				time: '',
				title: '提现申请已提交',
				status: 0,
				method: '微信零钱'
			}
		},
		onLoad(option) {
			console.log(option);
			this.type = option.type
			this.$u.api.shop.Getpayset().then(res=>{
				if(res.code == 200){
					this.data = res.data
				}
			})
			this.$u.api.shop.Getpaylist().then(res =>{
				if(res.code == 200){
					this.list = res.data
				}
			})
		},
		onShow() {
			this.$u.api.shop.Getpaylist().then(res =>{
				if(res.code == 200){
					this.list = res.data
				}
			})
		},
		methods:{
			confirm(){
				uni.navigateBack({
				    delta: 1,
				})
			},
			cancel(){
				this.$u.api.shop.Getpaylist().then(res =>{
					if(res.code == 200){
						this.list = res.data
					}
				})
				this.money = ''	
			},
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.money += val;
				console.log(this.money);
			},
			// 退格键被点击
			backspace() {
				if(this.money.length) this.money = this.money.substr(0, this.money.length - 1);
				console.log(this.money);
			},
			open(){
				this.show = true
			},
			btn(){
				let alipayName = uni.getStorageSync('realName');
				if(this.type ==1){
					// 支付宝提现第一次需要输入真实姓名
					// 优先从本地缓存获取alipay_name
					
					if (!alipayName) {
						uni.showModal({
							title: '首次支付宝提现',
							content: '',
							editable: true,
							placeholderText: '首次支付宝提现需要真实姓名',
							success: (res) => {
								if (res.confirm && res.content && res.content.trim() !== '') {
									let realName = res.content.trim();
									
								    uni.setStorageSync('realName', realName); // 保存到本地	
									return this.btn();
								} else if (res.confirm) {
									uni.showToast({
										title: '请输入真实姓名',
										icon: 'none'
									});
								}
							}
						});
						return;
					}
				}

				let obj ={
					money:Number(this.money),
					is_type:this.type,
					realName: alipayName
				}
				console.log('1')
				this.$u.api.shop.Tixian(obj).then(res =>{
					console.log('11')
					if(res.code == 200){
						console.log('111')
						// this.show1=true
						if(res.data.need_approval){
							this.tixianSuccess = true
							this.expectedTime = res.data.expectedTime
							this.money = res.data.money
							this.fuwuFee = res.data.fuwuFee
							this.status = res.data.status
							this.method = res.data.method
							this.time = res.data.time
							this.title = res.data.title
						}else if(res.data.package_info){
							console.log('2')
							//不需要审核，直接提现
							uni.requestMerchantTransfer({
								appId: res.data.package_info.appId,
								mchId: res.data.package_info.mchId,
								package: res.data.package_info.package,
								success: (ress) => {
									console.log(ress)
									if(ress.errMsg == 'requestMerchantTransfer:ok'){
										this.tixianSuccess = true
										this.expectedTime = res.data.expectedTime
										this.money = res.data.money
										this.fuwuFee = res.data.fuwuFee
										this.status = res.data.status
										this.method = res.data.method
										this.time = res.data.time
										this.title = res.data.title
									}
								},
								fail: (ress) => {
									console.log('22')
									if(ress.result == 'cancel'){	
										uni.showToast({
											title: '用户取消提现',
											icon: 'none'
										})
										setTimeout(()=>{
											this.$u.api.shop.cancelConfirm({id:res.data.id})
										},600)
									}
									
								}
							})
						}else if(res.data.is_type==2){
							//银行卡提现
							this.tixianSuccess = true
							this.expectedTime = res.data.expectedTime
							this.money = res.data.money
							this.fuwuFee = res.data.fuwuFee
							this.status = res.data.status
							this.method = res.data.method
							this.time = res.data.time
							this.title = res.data.title
						}
					}else{
						uni.showModal({
							title: '提现失败',
							content: res.msg
						})
					}
					
				}).catch(req =>{
					this.show2 = true
					this.content1 = req.data.msg
				})
			},
			getValue(list){
				console.log(list.bank_code);
				this.cardid = list.bank_code
			},
			Gotocard(index){
				uni.navigateTo({
					url:`../my/changecard?id=${index}`
				})
			}
		}
	}
</script>

<style>
	.top{
		width: 690rpx;
		height: 120rpx;
		background-color: white;
		margin: 30rpx;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		box-sizing: border-box;
	}
	.topmain1{
		width: 114rpx;
		font-size: 28rpx;
		margin-left: 30rpx;
	}
	.topimg1{
		width: 48rpx;
		height: 48rpx;
		margin-left: 22rpx;
	}
	.topmain3{
		width: 80rpx;
		font-size: 24rpx;
		margin-left: 16rpx;
	}
	.topmain5{
		width: 160rpx;
	}
	.topmain4{
		width: 250rpx;
		font-size: 24rpx;
		color: #DBDFE4;
		margin-left: 10rpx;
	}
	.topmain6{
		width: 330rpx;
		font-size: 24rpx;
		color: #DBDFE4;
		margin-left: 10rpx;
	}
	.topimg{
		width: 8rpx;
		height: 16rpx;
	}
	.main{
		width: 690rpx;
		height: 496rpx;
		border-radius: 16rpx;
		margin: 30rpx;
		background-color: white;
	}
	.maintop{
		width: 660rpx;
		height: 90rpx;
		margin-left: 30rpx;
		font-size: 24rpx;
		line-height: 90rpx;
		color: #9899A2;
		font-family: PingFang SC-Medium;
		font-weight:Medium ;
	}
	.mainnum{
		width: 630rpx;
		height: 92rpx;
		border-bottom: 1px #EEEEEE solid;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin-left: 30rpx;
	}
	.numsp{
		width: 44rpx;
		font-size: 44rpx;
		color: #323232;
		font-weight: bold;
	}
	.ipt{
		display: block;
		height: 36rpx;
		font-size: 28rpx;
	}
	.mainnum1{
		width: 660rpx;
		margin-left: 30rpx;
		margin-top: 26rpx;
		font-size: 26rpx;
		color: #333333;
	}
	.numtime{
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 26rpx;
		display: flex;
		justify-content: space-between;
	}
	.timesp{
		font-size: 24rpx;
		color: #DEE2E5;
	}
	.btn{
		width: 630rpx;
		height: 88rpx;
		margin-left: 30rpx;
		margin-top: 84rpx;
		text-align: center;
		line-height: 88rpx;
		color: white;
		font-size: 32rpx;
		background-color: #36BE6A;
		border-radius: 44rpx;
	}
</style>